<template>
  <div class="groupComponents">
    <div class="groupEvent" v-if="groupLists.length">
      <div
        class="group"
        v-for="(groupItem, groupIndex) in groupLists"
        :key="groupItem"
      >
        <!-- 组 -->
        <div
          :class="[
            'groupList',
            groupItem.isAddStatus ? 'activeGroup' : 'defaultGroup',
          ]"
          :style="{
            margin: '5px 5px 5px ' + (popGroupIndex + popComponentIndex) + 'px',
          }"
        >
          <div
            class="left"
            @dblclick.stop="groupItem.editStatus = !groupItem.editStatus"
            @click.stop="clickGroup({ groupItem, groupItem })"
          >
            <down-outlined
              v-if="groupItem.collpaseStatus"
              @click.stop="groupItem.collpaseStatus = !groupItem.collpaseStatus"
              style="fontsize: 12px"
            />
            <right-outlined
              @click.stop="groupItem.collpaseStatus = !groupItem.collpaseStatus"
              v-else
              style="fontsize: 12px"
            />
            <template v-if="!groupItem.editStatus">
              {{ groupItem.title }}
            </template>
            <template v-else>
              <a-input
                :autofocus="groupItem.editStatus ? true : false"
                @blur="inputBlur(groupItem)"
                v-model:value="groupItem.title"
                :style="{
                  width: 190 - popGroupIndex - popComponentIndex + 'px',
                }"
                placeholder="请输入分组标题"
              />
            </template>
          </div>
          <div class="right">
            <a-popover
              placement="right"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <template #content>
                <div
                  :key="menuItem"
                  v-for="(menuItem, menuIndex) in groupItem.menusConfig"
                  @click.stop="
                    handleMenu(
                      menuIndex == 0
                        ? {
                            key: menuIndex,
                            value1: groupItem,
                          }
                        : {
                            key: menuIndex,
                            value1: groupLists,
                            value2: groupIndex,
                            type: 'group',
                          }
                    )
                  "
                >
                  <div
                    :class="[
                      menuIndex == 0
                        ? groupItem.componentDataId ==
                          selectTemplateSvg.componentDataId
                          ? 'disableButton'
                          : 'menuItem'
                        : 'menuItem',
                    ]"
                  >
                    {{ menuItem.name }}
                  </div>
                </div>
              </template>
              <ellipsis-outlined />
            </a-popover>
          </div>
        </div>
        <div class="templateGroup">
          <template v-if="groupItem.collpaseStatus">
            <template v-if="groupItem.componentsList.length">
              <a-tabs
                size="small"
                :animated="false"
                :centered="true"
                v-model:activeKey="groupItem.activeTabsKey"
                :tabBarGutter="50"
              >
                <a-tab-pane
                  v-for="tabItem in tabModel"
                  :key="tabItem.key"
                  :tab="tabItem.tab"
                >
                  <div class="tabTemplate">
                    <!-- 子组件-->
                    <div
                      :class="[
                        'componentsList',
                        'componentItem',
                        componentItem.componentDataId ==
                        selectTemplateSvg.componentDataId
                          ? 'activeComponent'
                          : '',
                      ]"
                      :style="{
                        margin:
                          '5px 5px 5px ' +
                          (groupIndex +
                            popGroupIndex +
                            popComponentIndex +
                            10) +
                          'px',
                      }"
                      v-for="(
                        componentItem, componentIndex
                      ) in groupItem.componentsList"
                      :key="componentItem"
                      @click.stop="clickGroup({ groupItem, componentItem })"
                      @dblclick.stop="
                        componentItem.editStatus = !componentItem.editStatus
                      "
                    >
                      <div class="title">
                        <div class="left">
                          <down-outlined
                            v-if="componentItem.collpaseStatus"
                            @click.stop="
                              componentItem.collpaseStatus =
                                !componentItem.collpaseStatus
                            "
                            style="fontsize: 12px"
                          />
                          <right-outlined
                            @click.stop="
                              componentItem.collpaseStatus =
                                !componentItem.collpaseStatus
                            "
                            v-else
                            style="fontsize: 12px"
                          />
                          <template v-if="!componentItem.editStatus">
                            {{ componentItem.title }}
                          </template>
                          <template v-else>
                            <a-input
                              :style="{
                                width:
                                  190 -
                                  popGroupIndex -
                                  popComponentIndex +
                                  'px',
                              }"
                              :autofocus="
                                componentItem.editStatus ? true : false
                              "
                              @blur="inputBlur(componentItem)"
                              v-model:value="componentItem.title"
                              placeholder="请输入分组标题"
                            />
                          </template>
                        </div>
                        <div class="right">
                          <a-popover
                            placement="right"
                            :getPopupContainer="
                              (triggerNode) => triggerNode.parentNode
                            "
                          >
                            <template #content>
                              <div
                                :key="componentsMenuItem"
                                v-for="componentsMenuItem in componentItem.menusConfig"
                                @click.stop="
                                  handleMenu({
                                    key: 1,
                                    value1: groupItem.componentsList,
                                    value2: componentIndex,
                                    type: 'component',
                                  })
                                "
                              >
                                <div class="menuItem">
                                  {{ componentsMenuItem.name }}
                                </div>
                              </div>
                            </template>
                            <ellipsis-outlined />
                          </a-popover>
                        </div>
                      </div>
                      <a-form class="tab" v-if="componentItem.collpaseStatus">
                        <default-attribute
                          v-if="groupLists"
                          class="attribute"
                          :defaultAttribute="
                            componentItem[groupItem.activeTabsKey]
                          "
                        />
                      </a-form>
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </template>
            <template v-else>
              <a-empty description="请选中当前组,单击需要管理的组件哦~" />
            </template>
            <template v-if="groupItem.groupLists.length">
              <group-components
                :popGroupIndex="groupIndex + 10"
                :popComponentIndex="
                  groupIndex + popGroupIndex + popComponentIndex
                "
                :fatherGroupItem="groupItem"
                :groupLists="groupItem.groupLists"
                :selectTemplateSvg="selectTemplateSvg"
                @addGroupMethod="addGroupMethod"
                @clickGroup="clickGroup"
                @handleMenu="handleMenu"
                @inputBlur="inputBlur"
              />
            </template>
          </template>
        </div>
      </div>
    </div>
    <a-empty v-else description="暂无事件分组" />
    <div
      class="button"
      v-if="
        !selectTemplateSvg.hideAddGroup &&
        popGroupIndex == 0 &&
        selectTemplateSvg.type == 'WaterPipeValveSvg'
      "
    >
      <a-button
        ghost
        type="primary"
        v-if="!selectTemplateSvg.hideAddGroup"
        @click.stop="addGroupMethod"
      >
        <template #icon><plus-outlined /></template>
        {{ groupLists.length ? '增加平级分组' : '添加分组' }}
      </a-button>
    </div>
  </div>
</template>
<script>
import {
  PlusOutlined,
  EllipsisOutlined,
  RightOutlined,
  DownOutlined,
} from '@ant-design/icons-vue';
import defaultAttribute from './defaultAttribute.vue';
export default {
  name: 'group-components',
  props: [
    'selectTemplateSvg',
    'groupLists',
    'popGroupIndex',
    'popComponentIndex',
    'fatherGroupItem',
  ],
  data() {
    return {
      tabModel: [
        {
          key: 'openValve',
          tab: '阀门开',
        },
        {
          key: 'closeValve',
          tab: '阀门关',
        },
      ],
    };
  },
  methods: {
    addGroupMethod() {
      this.$emit('addGroupMethod', this.groupLists);
    },
    clickGroup(val) {
      this.$emit('clickGroup', {
        groupItem: val.groupItem,
        componentItem: val.componentItem,
      });
    },
    handleMenu(val) {
      this.$emit('handleMenu', val);
    },
    inputBlur(val) {
      this.$emit('inputBlur', val);
    },
  },
  components: {
    PlusOutlined,
    EllipsisOutlined,
    RightOutlined,
    DownOutlined,
    defaultAttribute,
  },
};
</script>
<style scoped lang="less">
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #9e9e9e;
}
.button {
  margin: 10px;
  text-align: center;
}

/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0px !important;
}
// /deep/ .ant-tabs-nav-wrap {
//   position: fixed;
//   width: 25%;
//   background: white;
//   z-index: 100;
// }
.templateGroup {
  overflow: auto;
  max-height: 487px;
  // .tabTemplate {
  //   margin-top: 35px;
  // }
}
.groupEvent {
  height: 100%;
  overflow: auto;
}

.groupList {
  position: relative;
  display: flex;
  border: 1px solid #d9d9d9;

  .left {
    padding: 5px;
    flex: 5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .left:hover {
    cursor: pointer;
  }
  .right {
    padding: 5px;
    flex: 0.5;
    text-align: right;
    color: rgba(0, 0, 0, 0.85);
  }
}

.groupItem {
  background-color: #bec8c8;
}

.componentsList {
  margin-left: 20px;
  .title {
    display: flex;
    border: 1px solid #d9d9d9;
    position: relative;
    .left {
      flex: 5;
      padding: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .right {
      flex: 0.5;
      padding: 5px;
      text-align: right;
      color: rgba(0, 0, 0, 0.85);
    }
    .right:hover {
      cursor: pointer;
    }
  }
  .tab {
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    .attribute {
      padding: 5px;
      height: 100%;
    }
  }
}

.menuItem:hover {
  cursor: pointer;
  color: white;
  background-color: #00ccff;
}

.activeGroup {
  background-color: #87eef5;
}

.defaultGroup {
  background-color: #d5e4e5;
}

.activeComponent {
  outline: 1px solid #0cf;
}

.disableButton {
  color: #b8b8b8;
  background-color: #f5f5f5;
}

.disableButton:hover {
  cursor: not-allowed;
}
</style>
